@import "global";
@import "class";

body{
	padding: 0;
	margin: 0;
	color: @colorText;
	font-family: myFont;
	font-size: @fontSize;
	overflow: hidden;
//	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: none;
	cursor: default;

	&.hasbg{
		#colorbg{
			opacity: 0.6;
		}
		#menu, #meta,#timeline, #tool_right, #edit_tool{
			background-color: @colorTheme;
			opacity: 0.75;
		}
	}
}

input, select{
	border: 1px solid black;
	background-color: @colorDeep;
	color: @colorText;
	.middle(22px);
	outline: none;
	box-sizing: content-box;
	font-size: 14px;
}

@topHeight: 32px;

#blurbg{
	-webkit-filter: blur(15px);
	filter: blur(15px);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	width: 100%;
	height: 720px;
	position: absolute;
	z-index: -2;
}

#colorbg{
	width: 100%;
	height: 720px;
	position: absolute;
	background-color: @colorTheme;
	z-index: -1;
}

#menu, #meta{
	width: 100%;
	height: @topHeight;
	line-height: @topHeight;
	border-bottom: 1px solid #000;
	position: relative;
}

#menu{
	text-align: center;
	-webkit-app-region: drag;
	z-index: 10;
	&:after{
		.shadow;
		content: '';
		position: absolute;
		bottom: -2px;
	}
  	> img:first-child {
	  width: 24px;
	  height: 24px;
	  vertical-align: middle;
	  margin: 4px 0 0 4px;
	  .radius(2px);
	  float: left;
	}
	#menus{
		-webkit-app-region: no-drag;
		float: left;
		> ul{
			margin: 0 0 0 6px;
			height: @topHeight+1px;
			> li{
				float:left;
				display: inline-block;
				position: relative;
				margin: 0 4px;
				height: @topHeight+1px;
				&:hover{
					.sub-menu {
						display: block;
					}
				}
				>span{
					min-width: 38px;
					height: 24px;
					line-height: 24px;
					margin-top: 4px;
					display: inline-block;
					box-sizing: border-box;
					border: 1px solid transparent;
					.radius(4px);
					&:hover{
						border: 1px solid black;
						background-color: @colorBar;
						.inner-shadow(3px, #222);
					}
				}
				.sub-menu {
					display: none;
					min-width: 180px;
					position: absolute;
					z-index: 1000000;
					border: 1px solid black;
					border-top: none;
					background-color: @colorDeep;
					color: @colorText;
					li{
						text-align: left;
						text-indent: 6px;
					}
					.tip{
						line-height: 18px;
						color: mix(@colorText, @colorDeep, 50%);
					}
					.sub-menu-item {
						line-height: 28px;
						border-bottom: 1px solid rgba(53,53,53,0.7);
						i{
							font-style: normal;
						}
						em{
							float: right;
							margin-right: 3px;
							color: #c77;
						}
						&:hover {
							background-color: @colorHover;
						}
						&:last-child{
							border: none;
						}
						&.disable{
							color: #aaa;
						}
					}
				}

			}
		}
	}
	#title{
		position: absolute;
		left: 50%;
		width: 110px;
		margin-left: -55px;
		font-size: 16px;
	}
	.tool{
		float: right;
		-webkit-app-region: no-drag;
		span{
			display: inline-block;
			width: 16px;
			height: 16px;
			.radius(100%);
			margin-right: 4px;
			vertical-align: middle;
			background-color: #444;
			border: 1px solid #222;
			cursor: pointer;
			&:hover{
				box-shadow: 0 0 2px black;
			}
		}
		#min{
			&:hover{
				background-color: #ffea5d;
			}
		}
		#close{
			&:hover{
				background-color: @colorRed;
			}
		}
	}
}

#meta{
	&:before{
		content: '';
		display: inline-block;
		width: 7px;
		height: 32px;
		vertical-align: top;
		background: url(../img/tool.png) no-repeat;
		background-position: -139px -54px;
	}
	span{
		vertical-align: baseline;
		display: inline-block;
		height: 26px;
		overflow: hidden;
	}
	#action_name{
		margin-left: 2px;
		max-width: 180px;

	}
	#action_login{
		float: right;
		margin-right: 4px;
	}
}

#body{
	height: 614px; //<---这个值需要js调整
	display: -webkit-flex;
  	position: relative;
}

#edit, #tool_right{
	float: left;
	height: 100%;
	text-align: center;
	box-sizing: border-box;
}

#timeline{
	height: 40px;
	box-sizing: border-box;
	border-top: 1px solid black;
	display: -webkit-flex;
	position: relative;
	#curr_time{
		float: left;
		width: 76px;
		height: 32px;
		line-height: 32px;
		margin: 3px;
		padding: 0 4px;
		border: 1px solid black;
		.inner-shadow(2px, #676767);
		.radius(2px);
		box-sizing: border-box;
		background-color: #545454;
		&.hov{
			color: @colorRed;
		}
	}
	#timeline_area{
		float: left;
		height: 32px;
		margin-top: 3px;
		box-sizing: border-box;
		position: relative;
		.radius(2px);
		border: 1px solid #292929;
		-webkit-flex: 1;
		#timeline_bar, #timeline_bar_curr{
			height: 4px;
			position: absolute;
			top: 50%;
			left: 5px; //js控制长度
			margin-top: -2px;
			border: 1px solid black;
			display: block;
		}
		#timeline_bar{
			background: #9f9f9f;
		}
		#timeline_bar_curr{
			width: 1px;
			background: #d5d5d5;
			border-right-color: @colorRed;
		}
		#timeline_bar_icon{
			background-image: url('../img/tool.png');
			background-size: 100px;
			display: block;
			position: absolute;
			width: 6px;
			height: 28px;
			background-position: -177px -84px;
			margin-left: 3px;
			left: 0;
		}
	}
	#control{
		float: left;
		width: 120px;
		box-sizing: border-box;
		span{
			width: 30px;
			height: 30px;
			line-height: 30px;
			margin-top: 3px;
			&:nth-child(1){
				i{
					background-position: -36px -163px;
				}
			}
			&:nth-child(2){
				i{
					background-position: -8px -163px;
				}
			}
		}
	}
	#time_speed{
		position: absolute;
		right: 0;
		bottom: 39px;
		width: 40px;
		height: 80px;
		border-left: 1px solid black;
		border-top: 1px solid black;
		background: @colorTheme;
		z-index: 1;
		display: none;
		span{
			width: 30px;
			height: 30px;
			margin-top: 5px;
			&:nth-child(1){
				i{
					background-position: -71px -89px;
				}
			}
			&:nth-child(2){
				i{
					background-position: -103px -89px;
				}
			}
		}
	}
	#time_jumpto{
		position: absolute;
		left: 0;
		bottom: 39px;
		border-right: 1px solid black;
		border-top: 1px solid black;
		background: @colorTheme;
		width: 200px;
		height: 32px;
		z-index: 1;
		display: none;

		span{
			float: left;
			width: 54px;
			line-height: 32px;
		}

		input{
			float: left;
			width: 140px;
			margin-top: 4px;
		}
	}
}

#notify_layer{
	position: absolute;
	top: 32px;
	right: 0;
	z-index: 200;
	.item{
		width: 233px;
		padding: 4px 6px;
		background-color: @colorDeep;
		border: 1px solid black;
		.radius(4px);
		word-break: break-all;
		&.err{
			color: @colorRed;
			border-color: @colorRed;
		}
	}
}

#error_layer{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	display: none;
	z-index: 300;
	.inner-shadow(15px, #ee2222);
}

#tutorial_content{
    border:1px solid @colorRed;
    border-radius: 3px;
    padding: 6px;
    padding-bottom: 28px;
    position:absolute;
    z-index:23334;
    box-sizing:border-box;
    *{
      box-sizing:border-box;
    }
    background-color: @colorTheme;
    .next-hint{
        width: 100%;
        height : 28px;
        position: absolute;
        bottom : 0px;
        left : 0px;
        padding : 6px;
        .hint-text{
            color: @colorRed;
            float: right;
        }
    }
}
#readme_img{
    width: 1280px;
    height: 680px;
    top: 0px;
    left: 0px;
    position: absolute;
    z-index: 2333;
    display: none;
}

.taiko_mode{
  	#menu_convert_touch,#menu_flip,#mirror_flip,#menu_export_bms{
	  	display: none;
	}
}

body{
  	#menu_crosstrack{
	  	display: none;
	}
  	&.taiko_mode{
	  	#menu_crosstrack{
	  		display: list-item;
	  	}
	}
}
@import "rightbar";
@import "dialog";
@import "grid";
@import "marker";